<template>
<div :class="[{ 'input-item-active': isFocus }, { 'input-item-error': error }, 'input-item']">
  <div class="label">{{ label }}</div>
  <ADatePicker
      placeholder="请选择日期"
      v-model="value"
      @change="handleDatePickerChange"
  />
</div>
</template>

<script>
import moment from 'moment'
export default {
  name: "IntelInput",
  props: {
    focus: {
      type: Boolean,
      default: false
    },
    error: {
      type: Boolean,
      default: false
    },
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    },
    label: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'text'
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      isFocus: false,
      requestCode: '',
      captchaImg: true,
      ableGetCode: true
    }
  },
  directives: {
    focus: {
      // 指令的定义
      update: function (el, { value }) {
        if (value) {
          el.focus()
        }
      }
    }
  },
  watch: {
    requestCode: function (val,val2) {
      console.log('-----------------')
      console.log(val,val2)
    }
  },
  mounted() {
    if (this.type === 'captcha') {
      this.refreshCaptcha()
    }
  },
  methods: {
    handleDatePickerChange (date) {
      const dateStr = moment(date).format('YYYY-MM-DD')
      this.$emit('change', dateStr)
    }
  }
}
</script>

<style scoped>
.input-item {
  height: 60px;
  min-width: 300px;
  border: 1px solid #D7D7D7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px 20px;
  position: relative;
}
.input-item-active {
  border: 1px solid #0068B5;
}
.label {
  font-size: 14px;
  color: #999999;
}
.input-item-active .label {
  color: #0068B5;
}
input {
  border: none;
  background: none;
  font-size: 14px;
  color: #333333;
}
input:focus {
  outline: none;
}
input::placeholder {
  font-size: 14px;
  color: #333333;
}
.input-item-error {
  border: 1px solid #FF4D4F;
}
.input-item-error .label {
  color: #FF4D4F;
}


.captcha img {
  width: 120px;
  height: 50px;
  position: absolute;
  right: 5px;
  top: 5px;
}
.get-code {
  color: #0068B5;
  font-size: 14px;
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
}
.color-gray {
  color: #666666;
  cursor: none !important;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
}
</style>
